<template>
  <basic-crud :option="option">
    <template #menu="{ row }">
      <el-button link type="primary" icon="User" @click="handleOpenDialog(row)"
        >管理员列表</el-button
      >
    </template>
  </basic-crud>
  <basic-dialog-table
    v-model="visible"
    selectType="none"
    width="60%"
    title="管理员列表"
    :option="manageOptions"
    :hideFooter="true"
    :apiSource="{
      apiGetList,
      apiAdd,
      apiEdit,
      apiDel,
    }"
    :apiListParams="{ tenantId }"
    :apiAddParams="{ tenantId }"
  >
    <template #menu="{ row }">
      <el-button type="primary" link @click="handleOpenDialogEditPsw(row)"
        >修改密码</el-button
      >
    </template>
  </basic-dialog-table>
  <basic-dialog
    title="修改密码"
    v-model="editPswVisible"
    width="500"
    :submitBtnLoading="editPswSubmitLoading"
    @submit="handleSubmitEdtpsw"
  >
    <el-form
      :model="editPswFormData"
      ref="editPswDialogRef"
      :rules="editPswRules"
      label-width="120"
    >
      <el-form-item label="新密码" prop="adminPwd">
        <el-input
          v-model="editPswFormData.adminPwd"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPwd">
        <el-input
          v-model="editPswFormData.confirmPwd"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
    </el-form>
  </basic-dialog>
</template>

<script setup>
import {
  apiGetListManage as apiGetList,
  apiAddManage as apiAdd,
  apiEditManage as apiEdit,
  apiDelManage as apiDel,
  apiEditPassword,
} from '@/apis/system/orgManage.js'
const option = ref({
  dialogWidth: '50%',
  menuWidth: '280',
  labelWidth: 100,
  column: [
    {
      label: '组织全称',
      prop: 'name',
      search: true,
      width: 140,
      rules: [
        {
          message: '请输入组织全称',
          required: true,
          trigger: 'blur',
        },
      ],
      span: 24,
    },
    {
      label: '英文名称',
      prop: 'englishName',
      search: true,
      sortable: 'custom',
      width: 140,
      span: 24,
    },
    {
      prop: 'shotName',
      label: '组织简称',
      width: 120,
      type: 'input',
      span: 12,
    },
    {
      prop: 'code',
      label: '编号',
      rules: [
        {
          required: true,
          message: '编号不能为空',
          trigger: 'blur',
        },
      ],
      width: 120,
      type: 'input',
      span: 12,
    },
    {
      label: '法人',
      prop: 'principal',
      span: 12,
      width: 120,
    },
    {
      label: '联系电话',
      prop: 'tel',
      span: 12,
      width: 120,
    },
    {
      label: '地址',
      prop: 'address',
      span: 24,
      overHidden: true,
    },
    {
      type: 'radio',
      label: '开启三员',
      prop: 'threeRight',
      dicData: [
        { label: '开启', value: true },
        { label: '不开启', value: false },
      ],
      value: true,
      span: 12,
      width: 100,
      formatter: (row) => {
        if (row.threeRight === true) {
          return '开启'
        } else {
          return '不开启'
        }
      },
    },
    {
      prop: 'des',
      label: '描述',
      type: 'textarea',
      overHidden: true,
      span: 24,
    },
  ],
})

const manageOptions = {
  height: 400,
  menuWidth: '250',
  column: [
    {
      label: '名称',
      prop: 'name',
      width: 160,
      rules: [
        {
          required: true,
          message: '名称不能为空',
          trigger: 'blur',
        },
      ],
      span: 12,
    },
    {
      label: '编号',
      prop: 'code',
      width: 120,
      rules: [
        {
          required: true,
          message: '编号不能为空',
          trigger: 'blur',
        },
      ],
      span: 12,
    },
    {
      label: '邮箱地址',
      prop: 'email',
      span: 12,
      width: 160,
    },
    {
      label: '绑定的IP',
      prop: 'bindIps',
      span: 12,
    },
    {
      prop: 'des',
      label: '描述',
      type: 'textarea',
      span: 24,
    },
  ],
}
const visible = ref(false)
const tenantId = ref()
const handleOpenDialog = (row) => {
  tenantId.value = row.id
  visible.value = true
}

const useEditPassword = () => {
  const editPswVisible = ref(false)
  const editPswSubmitLoading = ref(false)
  const editPswFormData = ref({})
  const editPswDialogRef = ref()
  const editPswRules = ref({
    adminPwd: { required: true, message: '请输入新密码', trigger: 'blur' },
    confirmPwd: [
      { required: true, message: '请输入确认密码', trigger: 'blur' },
      {
        validator: (rule, value, callback) => {
          if (!value) {
            callback(new Error('请输入新密码'))
          } else {
            if (
              editPswFormData.value.adminPwd !==
              editPswFormData.value.confirmPwd
            ) {
              callback(new Error('确认密码与新密码不一致！'))
            }
          }
          callback()
        },
        trigger: 'blur',
      },
    ],
  })
  const handleOpenDialogEditPsw = (row) => {
    console.log(editPswDialogRef.value, 'editPswDialogRef.value')

    editPswDialogRef.value && editPswDialogRef.value?.resetFields()
    editPswVisible.value = true
    editPswFormData.value = {
      code: row.code,
      tenantId: row.tenantId,
    }
  }

  const handleSubmitEdtpsw = async () => {
    await editPswDialogRef.value.validate()
    editPswSubmitLoading.value = true
    apiEditPassword(editPswFormData.value)
      .then(() => {
        editPswVisible.value = false
        ElMessage.success('修改成功！')
      })
      .catch((err) => {
        ElMessage.error(err.msg)
      })
      .finally(() => {
        editPswSubmitLoading.value = false
      })
  }
  return {
    editPswVisible,
    editPswSubmitLoading,
    editPswFormData,
    editPswDialogRef,
    editPswRules,
    handleOpenDialogEditPsw,
    handleSubmitEdtpsw,
  }
}
const {
  editPswVisible,
  editPswSubmitLoading,
  editPswFormData,
  editPswDialogRef,
  editPswRules,
  handleOpenDialogEditPsw,
  handleSubmitEdtpsw,
} = useEditPassword()
</script>

<style lang="scss" scoped></style>
